<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('投诉全量分析')" />
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="analysis-alldetails-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>选择时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"  value="2019-10-01" name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" value="2019-10-24" name="endTime"/>
                        </li>
                        <li>
                            <label>经营单元：</label>
                            <select name="dw">
                                <option value="全部">全部</option>
                                <option th:each="problemsDw : ${problemsDwList}" th:text="${problemsDw.dw}" th:value="${problemsDw.dw}"></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()" >
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped " style="width:100%;" >
            <table id="bootstrap-table" ></table>
        </div>

    </div>
</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var detailFlag = [[${@permission.hasPermi('monitor:operlog:detail')}]];
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var datas = [[${@dict.getType('sys_common_status')}]];
    var prefix = ctx + "dataanalysis/alldetails";

    query();
    function query() {
        var options = {
            url: prefix+"/list",
            exportUrl: prefix + "/export",
            sortName: "lht",
            sortOrder: "desc",
            modalName: "投诉全量明细",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            columns: [
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                },
                {
                    field: 'lht',
                    title: '经营单元'
                },
                {
                    field: 'trade_id',
                    title: '投诉单号',
                    sortable: true
                },
                // {
                //     field: 'qd',
                //     title: '投诉渠道'
                // },
                {
                    field: 'ywlx',
                    title: '业务类型'
                },
                {
                    field: 'one_level',
                    title: '一级分类',
                    sortable: true
                },
                {
                    field: 'two_level',
                    title: '二级分类',
                    sortable: true
                },
                {
                    field: 'three_level',
                    title: '三级分类',
                    sortable: true
                },
                {
                    field: 'four_level',
                    title: '四级分类',
                    sortable: true,
                    visible:false

                },
                {
                    field: 'gszy',
                    title: '专业部门',
                    sortable: true

                }
                ,
                {
                    field: 'slnr',
                    title: '受理内容',
                    sortable: true,
                    visible: false

                }
                ,
                {
                    field: 'cljg',
                    title: '处理结果',
                    sortable: true,
                    visible: false

                },

                {
                    title: '受理情况',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="slqk(\'' + row.trade_id + '\')"><i class="fa fa-search"></i>查看</a>');
                        return actions.join('');
                    }
                }]
        };

        $.table.init(options);
        $.table.search();
        //initEcharts();
    };


    function slqk(trade_id) {

        var url = ctx + "dataanalysis/alldetails/slqk?trade_id="+trade_id;
        // alert(url);
        $.modal.open("查看工单情况", url);

    }
    function  initEcharts() {
        var myChart = echarts.init(document.getElementById("echarts-ladar-chart"));
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
        var lht=[];
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : prefix+"/json",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].fl);
                        values.push(result[i].fl_count);
                        lht.push(result[i].lht);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title:{text:'TOP5问题分析'},
                        tooltip: { trigger: 'axis'},
                        legend: {
                            x : 'right',
                            y : 'top',
                            data:['']
                        },
                        radar : [
                            {
                                name: {
                                    textStyle: {
                                        color: '#000',
                                        borderRadius: 3,
                                        padding: [3, 5]
                                    }
                                },
                                indicator : [{text: names[0],max:values[0]*1.7},
                                    {text: names[1],max:values[0]*1.7},
                                    {text: names[2],max:values[0]*1.7},
                                    {text: names[3],max:values[0]*1.7},
                                    {text: names[4],max:values[0]*1.7}]
                            }
                        ],
                        series: [{
                            // 根据名字对应到相应的系列
                            name: 'Top5问题',//薪资 series not exists. Legend data should be same with series name or data name.
                            type: 'radar',
                            data: [{name:'' ,value:values}]
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    }

    function unlock() {
        $.operate.post(prefix + "/unlock?loginName=" + $.table.selectColumns("loginName"));
    }
</script>
</body>
</html>